<template>
    <div class="returnGoodsApply">
        <div class="set-return">
          <div class="order-content">
            <split-vertical title="换货申请"></split-vertical>
              <el-row>
                <el-col :span="8">
                    <label>订单平台:</label><span>{{oriOrder.channelName}}</span>
                </el-col>
                <el-col :span="8">
                  <label>订单公司:</label><span>{{oriOrder.companyName}}</span>
                </el-col>
                <el-col :span="8">
                  <label>订单编号:</label><span>{{oriOrder.orderCode}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <label>订单时间:</label><span>{{oriOrder.orderTime}}</span>
                </el-col>
                <el-col :span="8">
                  <label>姓名:</label><span>{{oriOrder.receiverName}}</span>
                </el-col>
                <el-col :span="8">
                  <label>联系方式:</label><span>{{oriOrder.receiverPhone}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <label>订单金额:</label><span>{{oriOrder.orderMoney}}</span>
                </el-col>
                <el-col :span="8">
                  <label>订单状态:</label><span>{{oriOrder.orderStatus}}</span>
                </el-col>
                <el-col :span="8">
                  <label>佣金值:</label><span>{{oriOrder.agencyFee}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <label>省:</label><span>{{oriOrder.province}}</span>
                </el-col>
                <el-col :span="8">
                  <label>市:</label><span>{{oriOrder.city}}</span>
                </el-col>
                <el-col :span="8">
                  <label>区:</label><span>{{oriOrder.district}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <label>地址:</label><span>{{oriOrder.receiverAddress}}</span>
                </el-col>
              </el-row>
            </div>
        </div>
        <div class="commity_Info">
          <split-vertical title="商品信息"></split-vertical>
          <el-table
            @selection-change="handleSelectionChange"
            :data="returnData.returnItems"
            highlight-current-row
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="itemCode"
              label="商品编码"
              width="100">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="itemSkuName"
              label="商品名称" >
            </el-table-column>
            <el-table-column
              prop="purchaseNum"
              label="购买数量"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="surplusNum"
              label="可退数量" >
            </el-table-column>
            <el-table-column
              prop="receiverName"
              label="入仓仓库">
              <template slot-scope="scope">
                <el-select v-model="scope.row.depotCode" placeholder="请选择"  size="mini" clearable  :disabled="scope.row.flag == 0"  >
                  <el-option
                    v-for="item in stockIn"
                    :key="item.id"
                    :label="item.depotName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="退货数量">
              <template  slot-scope="scope">
                <el-input-number v-model="scope.row['returnNum']" :step="1"  controls-position="right" :min="1" @change="changeVal($event)" :disabled="scope.row.flag == 0" size="mini"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>

            <div class="inputNum">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="退还金额" prop="returnMoney">
                        <el-input v-model="ruleForm.returnMoney" placeholder="退还金额" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="退还佣金值" prop="returnAgency">
                        <el-input v-model="ruleForm.returnAgency" placeholder="退还佣金值" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="承担物流费用">
                        <el-input v-model="returnData.postageAssume" placeholder="承担物流费用" ></el-input>
                    </el-form-item>
                    <el-form-item label="额外赔偿费用">
                        <el-input v-model="returnData.extraCharges" placeholder="额外赔偿费用" ></el-input>
                    </el-form-item>
                </el-form>
            </div>

        <div class="btn">
            <el-button size="medium" type="primary"  @click="submitForm('ruleForm')">下一步</el-button>
            <el-button size="medium" @click="back">取消</el-button>
        </div>
    </div>
</template>
<script>
import {localStorage} from "js/localStorage"
import SplitVertical from "components/common/SplitVertical"
export default {
    components:{
      SplitVertical
    },
    data(){
        return{
            complaintReason:[],
            num:'',
            returnData:{},
            items:[],
            depotName:'',
            stockIn:[],
            returnNumber:'',
            depotCode:'',
            itemId:'',
            ruleForm:{
                /** 退还金额 */
                returnMoney:'',
                /** 退还佣金值 */
                returnAgency:'',
                 /** 承担物流费用 */
                postageAssume:'',
                /** 额外补偿费用 */
                extraCharges:'',
            },
            rules:{
                returnMoney: [
                    { required: true, message: '退还金额不能为空', trigger: 'blur' },
                ],
                returnAgency: [
                    { required: true, message: '退还佣金值不能为空', trigger: 'change' }
                ],
            },
            valArr:[],
            data:{},
            id:'',
            itemSkuName:'',
            skuName:'',
            selection:[],
            itemsArr:[],
            oriOrder:{}
        }
    },
    created(){
        this.id=this.$route.query.returnData
        this.userId= localStorage.get('userID')
        this.init()
    },
    methods:{
        init(){
            // 换货接口
            let parmas={
                complainId:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.returnData=data.data
                    this.oriOrder=data.data.oriOrder
                    this.returnData.returnItems.forEach(element => {
                        let item = {
                            itemId:'',
                            itemCode:'',
                            itemSkuName:'',
                            purchaseNum:Number,
                            returnNum:Number,
                            surplusNum:Number,
                            depotCode:''
                        }
                        item.itemId = element.itemId;
                        item.itemCode = element.itemCode;
                        item.itemSkuName = element.itemSkuName;
                        item.purchaseNum = element.purchaseNum;
                        item.surplusNum = element.surplusNum;
                        this.items.push(item);
                    });
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.complainApplyReplaceInfo(parmas,success)
        },
        back(){
            this.$router.go(-1)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.nextStep()
                } else {
                    return false;
                }
            });
        },
        nextStep(){
            var obj={
                returnMoney:this.ruleForm.returnMoney,
                returnAgency:this.ruleForm.returnAgency,
                postageAssume:this.returnData.postageAssume,
                extraCharges:this.returnData.extraCharges,
            }
            if(this.itemsArr.length==0){
                return this.$message.warning("请勾选复选框,再添加数字")
            }
            if(this.returnData.postageAssume == null ){
                return this.$message.warning("物流费用不能为空")
            }else if(this.returnData.extraCharges == null){
                return this.$message.warning("额外补偿费用不能为空")
            }
            this.$router.push({
                path:"/complaint-exchangeConfirm",
                query:{
                    data:this.id,
                    items:this.itemsArr,
                    obj:obj
                }
            })
        },
        getStore(){
            let success=data=>{
                if(data.code=="OK"){
                    this.stockIn=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.erpComplainDepotListAll({},success)
        },
        handleSelectionChange(selection){
            this.selection=selection
            this.itemsArr = []
            for(let value of this.returnData.returnItems){
                value["flag"]=0
                for(let item of selection){
                    if(item.itemId == value.itemId){
                        item.flag = 1
                        this.getStore()
                    }
                }
            }
            for(let value of selection){
                if(value.flag == 1){
                    this.itemsArr.push(value)
                }
            }
        },
        changeVal(val){
            for(let item of this.selection){
                if(val > item.surplusNum){
                    return this.$message.warning("退货数量不能大于可退数量")
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.returnGoodsApply{
    .set-return{
      background: #fff;
        .order-content{
          padding:0 5px;
          border-left: 2px solid #e8e8e8;
          border-right: 2px solid #e8e8e8;
          border-bottom: 2px solid #e8e8e8;
          label{
            width:85px;
            display:inline-block;
            font-size:15px;
            text-align: center;
            line-height: 30px;
          }
          span{
            color:#606266;
            display:inline-block;
            font-size:14px;
          }
        }
        p{
            font-weight:700;
            line-height:45px;
        }
        .table{
            margin-bottom:30px;
        }

        .tablePlatForm{
            .el-select{
                width:100%;
            }
        }
    }
    .btn{
        width:100%;
        text-align:center;
        padding-top:50px;
    }
  .inputNum{
    margin-top:3px;
    background: #fff;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
    .el-input{
      width:50%;
    }
  }
  .commity_Info{
    margin-top:3px;
    background: #fff;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;

  }
}
</style>
